<template>
    <div>
        <div v-if="currentPanel == 'default'">
            <el-card class="box-card">
                <el-select v-model="queryData.screenSize" placeholder="屏幕大小" size="small" @change="screenSizeChange">
                    <el-option v-for="item in dictionary.screenSize" :key="item.value" :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
                <el-input :disabled="queryData.screenSize == 'custom' ? false : true" size="small" v-model="queryData.screenWidth" placeholder="屏幕宽度"></el-input>
                <el-input :disabled="queryData.screenSize == 'custom' ? false : true" size="small" v-model="queryData.screenHeight" placeholder="屏幕高度"></el-input>
                <el-button size="small" type="primary" @click="resetQueryHandle">重置</el-button>
            </el-card>
            <div class="interspaceH"></div>
            <el-card>
                <div slot="header" class="clearfix">
                    <span>公域活动模板</span>
                    <el-button style="float: right; padding: 3px 0" type="text">更多...</el-button>
                </div>
                <div class="box" style="display:flex;flex-wrap: wrap;justify-content: space-between">
                    <el-card v-for="(item, index) in templateList1" :key="index" style="margin: 20px 20px 0 0">
                        <div slot="header" class="clearfix">
                            <span>{{ item.name }}</span>
                            <div style="float: right;">
                                <el-button v-if="item.showIndex" style="padding: 3px 0" type="text" @click="item.showIndex = false">查看历史活动统计</el-button>
                                <el-button v-if="!item.showIndex" style="padding: 3px 0" type="text" @click="item.showIndex = true">查看活动模板</el-button>
                                <el-divider direction="vertical"/>
                                <i class="el-icon-sort" @click="item.chooseFormVisible = !item.chooseFormVisible"></i>
                                <el-button v-if="item.chooseFormVisible" style="padding: 3px 0" type="text" @click="backParams = 'default';currentPanel = 'set';">设置表单</el-button>
                                <el-button v-if="!item.chooseFormVisible" style="padding: 3px 0" type="text" @click="currentPanel = 'chooseForm'">选择表单</el-button>
                            </div>
                        </div>
                        <!--:src="'http://wx.zzxapps.com/pages/overview/index?data=' + JSON.stringify(item.data)"-->

                        <iframe :src="item.showIndex? activityPages + JSON.stringify(item.data) : activityStatistics + JSON.stringify(item.data)" :style="{'border': '0','width': queryData.screenWidth + 'px','height': queryData.screenHeight + 'px'}"></iframe>
                    </el-card>
                </div>
            </el-card>

            <div class="interspaceH"></div>

            <el-card>
                <div slot="header" class="clearfix">
                    <span>私域活动模板</span>
                    <el-button style="float: right; padding: 3px 0" type="text">更多...</el-button>
                </div>
                <div class="box" style="display:flex;flex-wrap: wrap;justify-content: space-between">
                    <el-card v-for="(item, index) in templateList2" :key="index" style="margin: 20px 20px 0 0">
                        <div slot="header" class="clearfix">
                            <span>{{ item.name }}</span>
                            <div style="float: right;">
                                <el-button v-if="item.showIndex" style="padding: 3px 0" type="text" @click="item.showIndex = false">查看历史活动统计</el-button>
                                <el-button v-if="!item.showIndex" style="padding: 3px 0" type="text" @click="item.showIndex = true">查看活动模板</el-button>
                                <el-divider direction="vertical"/>
                                <i class="el-icon-sort" @click="item.chooseFormVisible = !item.chooseFormVisible"></i>
                                <el-button v-if="item.chooseFormVisible" style="padding: 3px 0" type="text" @click="backParams = 'default';currentPanel = 'set';">设置表单</el-button>
                                <el-button v-if="!item.chooseFormVisible" style="padding: 3px 0" type="text" @click="currentPanel = 'chooseForm'">选择表单</el-button>
                            </div>
                        </div>
                        <!--:src="'http://wx.zzxapps.com/pages/overview/index?data=' + JSON.stringify(item.data)"-->

                        <iframe :src="item.showIndex? activityPages + JSON.stringify(item.data) : activityStatistics + JSON.stringify(item.data)" :style="{'border': '0','width': queryData.screenWidth + 'px','height': queryData.screenHeight + 'px'}"></iframe>
                    </el-card>
                </div>
            </el-card>
        </div>

        <SetForm v-if="currentPanel == 'set'" :drawingList="drawingList" :activeId="activeId" @submit="formSubmit" @back="currentPanel = $event" ref="setForm" :backParams="backParams"/>

        <el-card v-if="currentPanel == 'chooseForm'">
            <div slot="header" class="clearfix">
                <div style="display:flex;justify-content: space-between;align-items: center">
                    <span>选择活动表单</span>
                    <el-button style="padding: 3px 0" type="text" @click="backParams = 'chooseForm';currentPanel = 'set'">
                        修改表单内容
                    </el-button>
                </div>
            </div>
            <el-form ref="form" label-width="150px">
                <el-form-item label="选择表单">
                    <el-select v-model="chooseForm.formType" placeholder="请选择活动表单" size="small">
                        <el-option v-for="item in formType" :key="item.value" :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="表单内容">
                    <el-card>
                        <draggable-item
                                v-for="(item, index) in drawingList"
                                :key="item.renderKey"
                                :drawing-list="drawingList"
                                :current-item="item"
                                :index="index"
                                :active-id="activeId"
                                :form-conf="formConf"/>
                    </el-card>
                </el-form-item>
            </el-form>
            <div style="padding: 15px">
                <el-button type="primary" @click="currentPanel = 'default';$message({type: 'success',message: '选择表单成功'})">确定</el-button>
                <el-button plain @click="currentPanel = 'default'">返回</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import drawingDefalut from '@/form_views/components/generator/drawingDefalut'
import {formConf} from '@/form_views/components/generator/config'
import DraggableItem from '@/views/masket/activity/form'
import SetForm from "@/form_views/views/index/Home";

const initQueryData = {
    screenSize: 'custom',
    screenWidth: '375',
    screenHeight: '812'
}

const formType = [
    {
        label: '表单类型1',
        value: '1'
    },
    {
        label: '表单类型2',
        value: '2'
    },
    {
        label: '表单类型3',
        value: '3'
    }
]

//屏幕大小，width * height
const screenSize = [
    {
        label: 'Moto G4',
        value: '360*640'
    },
    {
        label: 'Pixel',
        value: '411*731'
    },
    {
        label: 'iphone 5/SE',
        value: '320*568'
    },
    {
        label: 'iphone 6/7/8',
        value: '375*667'
    },
    {
        label: 'iphone 6/7/8 Plus',
        value: '375*736'
    },
    {
        label: 'iphone X',
        value: '375*812'
    },
    {
        label: 'iPad',
        value: '768*1024'
    },
    {
        label: 'iPad Pro',
        value: '1024*1366'
    },
    {
        label: 'Galaxy Fold',
        value: '280*653'
    },
    {
        label: '自定义',
        value: 'custom'
    }
]

export default {
    name: "index",
    components: {SetForm,DraggableItem},
    data() {
        return {
            currentPanel: 'default',
            backParams: 'default',
            queryData: {...initQueryData},
            activityPages: 'http://wx.zzxapps.com/pages/activity/index?data=',
            activityStatistics: 'http://wx.zzxapps.com/pages/activity/statistics/index?data=',
            dictionary: {
                screenSize: screenSize
            },
            templateList1: [
                {
                    data: {type:"1",imageName:""},
                    showIndex: true,
                    chooseFormVisible: false,
                    name: '券活动模板'
                },
                {
                    data: {type:"2",imageName:""},
                    showIndex: true,
                    chooseFormVisible: false,
                    name: '抽奖活动模板'
                },
                {
                    data: {type:"3",imageName:"1"},
                    showIndex: true,
                    chooseFormVisible: false,
                    name: '投票活动模板'
                }
            ],
            templateList2: [
                {
                    data: {type:"4",imageName:"2"},
                    showIndex: true,
                    chooseFormVisible: false,
                    name: '游戏活动模板'
                },
                {
                    data: {type:"5",imageName:"3"},
                    showIndex: true,
                    chooseFormVisible: false,
                    name: '积分活动模板'
                },
                {
                    data: {type:"6",imageName:"4"},
                    showIndex: true,
                    chooseFormVisible: false,
                    name: '节日活动模板'
                }/*,
                {
                    data: {type:"7",imageName:"5"},
                    showIndex: true,
                    name: '调研活动模板'
                },
                {
                    data: {type:"8",imageName:"6"},
                    showIndex: true,
                    name: '传播/邀请活动模板'
                }*/
            ],
            chooseForm: {},
            formType: [...formType],
            drawingList: [],
            activeId: "",
            formList: [],
            formConf,
        }
    },
    mounted() {
        let data = [...drawingDefalut]
        data = this.shiftData(data)
        this.drawingList = data
        this.activeId = data[0].formId
        this.formList = data
    },
    beforeDestroy() {
        this.drawingList = this.formList
    },
    methods: {
        resetQueryHandle() {
            this.queryData = {...initQueryData}
        },
        screenSizeChange(e) {
            if (e != 'custom') {
                let arr = e.split('*')
                this.queryData['screenWidth'] = arr[0]
                this.queryData['screenHeight'] = arr[1]
            }
        },
        formSubmit(data, backParams) {
            let drawingList = data.fields
            drawingList = this.shiftData(drawingList)
            this.drawingList = drawingList
            this.activeId = drawingList[0].formId
            this.$message({
                message: '表单提交成功',
                type: 'success'
            });
            this.currentPanel = backParams
        },
        shiftData(data) {
            data.map(item => {
                item.disabled = true
            })
            return data
        },
    }
}
</script>

<style scoped>
.box-card .el-input {
    width: 120px;
}
.box:after {
    content:"";
    width: 27%;
}
</style>
